<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="任务名称：">
                        <Input type="text" v-model="form1.taskName"/>
                    </FormItem>
                </Col>
                <Col span="16">
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" type="success" class="ivu-btn-add" icon="md-add"
                            @click="addInfo">新增
                    </Button>
                </Col>
            </Row>
        </Form>

        <Table ref='table' :loading="loading" size="small" :height="tableHeight" class="table" no-data-text="没有查询到相关数据!"
               highlight-row stripe border :columns="columns1" width="100%" :data="dataTable">
        </Table>

        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal :mask-closable="false" :mask-closable="false" title="任务"  v-model="model1" :width=900>
            <Form ref="dataForm" :model="dataForm" label-position="top" :rules="ruleCustom">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="检查模板：" prop="modelId">
                            <Input type="text" readonly @on-focus="openModelModal" v-model="dataForm.modelName"></Input>
                            <Input type="text" v-show="false" v-model="dataForm.modelId"></Input>
                            <Input type="text" v-show="false" v-model="dataForm.modelVersionId"></Input>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="检查日期：" prop="startDate">
                            <DatePicker type="date" style="width: 100%" format="yyyy-MM-dd"
                                        v-model="dataForm.taskDate"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                       <!-- <FormItem label="检查类型：" prop="checkType">
                            <Select v-model="dataForm.checkType">
                                <Option value="0">日常检查</Option>
                                <Option value="1">监督检查</Option>
                                <Option value="2">体系审核</Option>
                            </Select>
                        </FormItem>-->
                        <FormItem label="任务名称：" prop="taskName">
                            <Input type="text" v-model="dataForm.taskName"/>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="检查级别：" prop="checkLevel">
                            <Select v-model="dataForm.checkLevel">
                                <Option value="0">公司级</Option>
                                <Option value="1">二级单位级</Option>
                                <Option value="2">班组级</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="检查单位：" prop="execOrgId">
                            <!--<cascaderDom ref="childConOrg1" @setOrgInfo="setExecOrgId" @setOrgname="setExecOrgName"
                                         :currentOrgId="currentExecOrgId" :currentOrgName="currentExecOrgName"
                                         :orgTree="true"></cascaderDom>-->
                            <Input type="text" v-show="false" v-model="dataForm.execOrgId"/>
                            <Input type="text" readonly v-model="dataForm.execOrgName"/>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="检查人：" prop="execUserId">
                           <!-- <Select
                                ref="select"
                                placeholder="请输入关键字查询"
                                v-model="dataForm.execUserId"
                                filterable
                                :remote-method="remoteMethod1"
                                :loading="loading1">
                                <Option v-for="(option, index) in options1" :value="option.userId" :label="option.userName" :key="option.userId">
                                    <span>{{option.userName}}</span>
                                    <span style="float:right;color:#ccc">{{option.orgInfo.orgName}}</span>
                                </Option>
                            </Select>-->
                            <Input type="text" v-show="false" v-model="dataForm.execUserId"/>
                            <Input type="text" readonly v-model="dataForm.execUserName"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="受检单位：" prop="checkedOrg">
                            <cascaderDom ref="childConOrg2" @setOrgInfo="setCheckedOrgId"
                                         @setOrgname="setCheckedOrgName"
                                         :currentOrgId="currentCheckedOrgId" :currentOrgName="currentCheckedOrgName"
                                         :orgTree="true"></cascaderDom>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <!--<FormItem label="参与人员：" prop="participant">
                            <Input type="text" v-model="dataForm.participant"/>
                        </FormItem>-->
                    </Col>
                </Row>
               <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="检查模板：" prop="modelId">
                            <Input type="text" readonly @on-focus="openModelModal" v-model="dataForm.modelName"></Input>
                            <Input type="text" v-show="false" v-model="dataForm.modelId"></Input>
                            <Input type="text" v-show="false" v-model="dataForm.modelVersionId"></Input>
                        </FormItem>
                    </Col>
                    <Col span="11">
                    </Col>
                </Row>-->
                <!--<Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="要求开始时间：" prop="reqStartTime">
                            <TimePicker editable type="time" format="HH:mm" style="width: 100%"
                                        placeholder="Select time" v-model="dataForm.reqStartTime"></TimePicker>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="要求结束时间：" prop="reqEndTime">
                            <TimePicker editable type="time" format="HH:mm" style="width: 100%"
                                        placeholder="Select time" v-model="dataForm.reqEndTime"></TimePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="触发时间：" prop="checkTime">
                            <TimePicker editable type="time" format="HH:mm" style="width: 100%"
                                        placeholder="Select time" v-model="dataForm.execTime"></TimePicker>
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="是否提醒" prop="ifRemind">
                            <Select v-model="dataForm.ifRemind">
                                <Option value="0">不提醒</Option>
                                <Option value="1">提醒</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>-->
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="23">
                        <FormItem label="检查任务描述：">
                            <Input v-model="dataForm.notes" type="textarea" :autosize="{minRows: 3,maxRows: 5}"/>
                        </FormItem>
                    </Col>
                </Row>
                <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                     <Col span="23">
                         <FormItem>
                             <Button class='ivu-btn-save' :loading="buttonLoading" @click="saveData()">确定</Button>
                             <Button class='ivu-btn-cancel' @click="handleCancel"  style="margin-left: 2px">取消</Button>
                         </FormItem>
                     </Col>
                 </Row>-->
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' :loading="buttonLoading" @click="saveData()">确定</Button>
                <Button class='ivu-btn-cancel' @click="handleCancel" style="margin-left: 2px">取消</Button>
            </div>
        </Modal>

        <Modal :mask-closable="false" :mask-closable="false" title="任务"  v-model="viewModal" :width=900>
            <Form ref="viewForm" :model="viewForm" :label-width="100">
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="检查模板：" prop="modelId">
                            {{viewForm.modelName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="检查日期：">
                            {{viewForm.taskDate}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="detail-background-clor">
                    <Col span="11">
                        <!--<FormItem label="检查类型：">
                            {{viewForm.checkTypeName}}
                        </FormItem>-->
                        <FormItem label="任务名称：">
                            {{viewForm.taskName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="检查级别：" prop="checkLevel">
                            {{viewForm.checkLevelName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="检查单位：" prop="execOrgId">
                            {{viewForm.execOrgName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="检查人：" prop="execUserId">
                            {{viewForm.execUserName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="detail-background-clor">
                   <!-- <Col span="11">
                        <FormItem label="参与人员：" prop="participant">
                            {{viewForm.participant}}
                        </FormItem>
                    </Col>-->
                    <Col span="23">
                        <FormItem label="受检单位：" prop="checkedOrg">
                            {{viewForm.checkedOrgName}}
                        </FormItem>
                    </Col>
                </Row>
               <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="检查模板：" prop="modelId">
                            {{viewForm.modelName}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                    </Col>
                </Row>-->
                <!--<Row type="flex" justify="space-around" class="detail-background-clor">
                    <Col span="11">
                        <FormItem label="要求开始时间：" prop="reqStartTime">
                            {{viewForm.reqStartTime}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="要求结束时间：" prop="reqEndTime">
                            {{viewForm.reqEndTime}}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex" justify="space-around" class="code-row-bg">
                    <Col span="11">
                        <FormItem label="触发时间：" prop="execTime">
                            {{viewForm.execTime}}
                        </FormItem>
                    </Col>
                    <Col span="11">
                        <FormItem label="是否提醒" prop="ifRemind">
                            {{viewForm.ifRemind=='0'?'不提醒' : '提醒'}}
                        </FormItem>
                    </Col>
                </Row>-->
                <Row type="flex" justify="space-around" >
                    <Col span="23">
                        <FormItem label="检查任务描述：" prop="notes">
                            {{viewForm.notes}}
                        </FormItem>
                    </Col>
                </Row>
                <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                     <Col span="23">
                         <FormItem>
                             <Button class='ivu-btn-save' @click="viewModal=false">关闭</Button>
                         </FormItem>
                     </Col>
                 </Row>-->
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="viewModal=false">关闭</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" :mask-closable="false"  footer-hide v-model="selectModelModal" :width=900>
            <ModelListForSelect @getSelectModelData="getSelectModelData"></ModelListForSelect>
        </Modal>

    </layout>
</template>

<script>
    import {Api} from '../../../../api/index.js'
    import cascaderDom from '../../../../components/cascader-dom'
    import {sessionStorage} from '../../../../common/cacheUtils.js';
    import ModelListForSelect from './../plan/modelListForSelect.vue'
    import {formatDate} from '../../../../tools/index'

    export default {
        components: {
            ModelListForSelect, cascaderDom
        },
        data() {
            return {
                form1: {},
                dataForm: {},
                loading1: false,
                options1:[],
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        minWidth: 220,
                        title: '任务名称',
                        key: 'taskName',
                        align: 'center'
                    },
                    {
                        minWidth: 130,
                        title: '检查日期',
                        key: 'taskDate',
                        align: 'center'
                    },
                   /* {
                        minWidth: 120,
                        title: '检查类型',
                        align: 'center',
                        key: 'checkType',
                        render: (h, params) => {
                            if (params.row.checkType == '0') {
                                return h('span', {}, '日常检查')
                            } else if (params.row.checkType == '1') {
                                return h('span', {}, '监督检查')
                            } else if (params.row.checkType == '2') {
                                return h('span', {}, '体系审核')
                            }
                        }
                    },*/
                    {
                        minWidth: 135,
                        title: '检查级别',
                        key: 'checkLevel',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.checkLevel == '0') {
                                return h('span', {}, '公司级')
                            } else if (params.row.checkLevel == '1') {
                                return h('span', {}, '二级单位级')
                            } else if (params.row.checkLevel == '2') {
                                return h('span', {}, '班组级')
                            }
                        }
                    },
                    {
                        minWidth: 180,
                        title: '执行组织机构',
                        key: 'execOrgName',
                        align: 'center'
                    },
                    {
                        minWidth: 100,
                        title: '执行状态',
                        key: 'taskStatus',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.taskStatus == '1') {
                                return h('span', {}, '未执行')
                            } else if (params.row.taskStatus == '2') {
                                return h('span', {}, '执行中')
                            } else if (params.row.taskStatus == '3') {
                                return h('span', {}, '已执行')
                            }
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                    },
                                    on: {
                                        click: () => {
                                            this.viewData(params.row);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.taskStatus == '1' ? '':'#d0d0d0' ,
                                        pointerEvents: params.row.taskStatus == '1' ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.toEdit(params.row);
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: params.row.taskStatus == '1' ? 'red':'#d0d0d0' ,
                                        pointerEvents: params.row.taskStatus == '1' ? '' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                ruleCustom: {
                    taskName: [{required: true, message: '  ', trigger: 'blur,change'}],
                    taskDate: [{required: true, message: '  ', trigger: 'blur,change', type: 'date'}],
                    checkType: [{required: true, message: '  ', trigger: 'blur,change'}],
                    checkLevel: [{required: true, message: '  ', trigger: 'blur,change'}],
                    execUserId: [{required: true, message: '  ', trigger: 'blur,change'}],
                    checkedOrg: [{required: true, message: '  ', trigger: 'blur,change'}],
                    // notes: [{required: true, message: '  ', trigger: 'blur,change'}],
                },
                selectModelModal: false,
                currentCheckedOrgId: '',
                currentCheckedOrgName: '',
                currentExecOrgId: '',
                currentExecOrgName: '',
                dataTable: [],
                model1: false,
                lastDaysDisabled: true,
                add: false,
                loading: false, tableHeight: '',
                deleteRows: [],
                buttonLoading: false, viewModal: false,
                viewForm: {},
                viewSpanShow: false,
                viewCheckCycleRadio: '',
                viewCheckCycleCheckbox: [],
                setCurrentExecName: {},
            }
        },
        mounted: function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            remoteMethod1(query){
                if(this.dataForm.execUserId == query){
                        return ;}
                if (query !== '') {
                    clearTimeout(this.remoteMethod1.timer);
                    this.remoteMethod1.timer = setTimeout(()=>{
                        this.loading1 = true;
                        let data = {
                            userName: query,
                            orgId: sessionStorage('userId').getObject('userId').orgInfo.parentId
                        };
                        this.$http.get(Api.queryUserByUserName , {params: data}).then((res) => {
                            this.loading1 = false;
                            this.options1 = res.data.data;
                        }).catch(e => {
                            this.loading1 = false;
                        })
                    },200);
                } else {
                    this.options1 = [];
                }
            },
            getSelectModelData(row) {
                this.dataForm.modelId = row.modelId;
                this.dataForm.modelVersionId = row.modelVersionId;
                this.dataForm.modelName = row.modelName;
                this.dataForm.taskName = row.modelName + formatDate(new Date(), "yyyyMMdd");
                this.selectModelModal = false;
            },
            openModelModal() {
                this.selectModelModal = true;
            },
            handleCancel() {
                this.model1 = false;
            },

            setExecOrgId(data) {
                this.dataForm.execOrgId = data[data.length - 1];
            },
            setExecOrgName(data) {
                this.dataForm.execOrgName = data;
            },

            setCheckedOrgId(data) {
                this.dataForm.checkedOrg = data[data.length - 1];
            },
            setCheckedOrgName(data) {
                this.dataForm.checkedOrgName = data;
            },

            addInfo() {
                this.dataForm = {
                    taskDate:new Date(),
                    execOrgId: sessionStorage('userId').getObject('userId').companyId,
                    execOrgName: sessionStorage('userId').getObject('userId').companyName,
                    execUserName: sessionStorage('userId').getObject('userId').userName,
                    execUserId: sessionStorage('userId').getObject('userId').userId
                };
                this.currentCheckedOrgId = '';
                this.currentCheckedOrgName = '';
                this.currentExecOrgId = '';
                this.currentExecOrgName = '';
                this.setCurrentExecName = {};
                this.model1 = true;
            },

            setExecUserName(data) {
                this.dataForm.execUserName = data;
            },
            setExecUserId(data) {
                this.dataForm.execUserId = data[data.length - 1];
            },

            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },

            toEdit(row) {
                let url = Api.getSecurityCheckTaskDetailById + '/' + row.mainTaskId;
                this.$http.get(url, {}).then((res) => {
                    this.model1 = true;
                    this.dataForm = res.data;
                    this.options1=[{}];
                    this.$set(this.options1[0],'userId',res.data.execUserId);
                    this.$set(this.options1[0],'userName',res.data.execUserName);
                    this.$set(this.options1[0],'orgInfo',{orgName:'xx'});
                    this.currentCheckedOrgId = res.data.checkedOrg;
                    this.currentCheckedOrgName = res.data.checkedOrgName;
                    this.currentExecOrgId = res.data.execOrgId;
                    this.currentExecOrgName = res.data.execOrgName;
                    this.setCurrentExecName = {value: res.data.execUserId, label: res.data.execUserName};

                    setTimeout(() => {
                        // this.$refs.childConOrg1.setCurrentOrg();
                        this.$refs.childConOrg2.setCurrentOrg();

                    }, 100);
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },
            viewData(row) {
                let url = Api.getSecurityCheckTaskDetailById + '/' + row.mainTaskId;
                this.$http.get(url, {}).then((res) => {
                    this.viewForm = res.data;
                    if (this.viewForm.checkType == '0') {
                        this.viewForm.checkTypeName = '日常检查';
                    } else if (this.viewForm.checkType == '1') {
                        this.viewForm.checkTypeName = '监督检查';
                    } else if (this.viewForm.checkType == '2') {
                        this.viewForm.checkTypeName = '体系审核';
                    }

                    if (this.viewForm.checkLevel == '0') {
                        this.viewForm.checkLevelName = '公司级';
                    } else if (this.viewForm.checkLevel == '1') {
                        this.viewForm.checkLevelName = '二级单位级';
                    } else if (this.viewForm.checkLevel == '2') {
                        this.viewForm.checkLevelName = '班组级';
                    }
                    console.log(this.viewForm)
                    this.viewModal = true;
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })

            },
            saveData() {
                this.$refs.dataForm.validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true
                        this.dataForm.taskDate = this.formatDate(new Date(this.dataForm.taskDate), 'yyyy-MM-dd');
                        this.options1.forEach(item=>{
                            if(item.userId == this.dataForm.execUserId)
                                this.dataForm.execUserName = item.userName;
                        })
                        if (this.dataForm.mainTaskId == undefined) {
                            this.dataForm = Object.assign(JSON.parse(sessionStorage('paramUserInfo').get('userInfo')), this.dataForm);
                        }
                        this.dataForm.checkCategory = this.$route.query.id

                        this.$http.post(Api.saveSecurityCheckTaskList, this.dataForm).then((res) => {
                            this.$Message.success("保存成功")
                            this.model1 = false;
                            this.query();
                            this.buttonLoading = false
                        }).catch(e => {
                            this.model1 = false;
                            this.query();
                            this.buttonLoading = false
                            this.$Message.error("数据保存失败")
                        })
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            query() {
                this.loading = true;
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    userId: JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserId"],
                    checkCategory: this.$route.query.id
                }

                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

                let url = Api.getSecurityCheckTaskList;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            reset() {
                this.form1 = {};
                this.query();
            },

            deleteData(row) {
                let _this = this;
                let config = {
                    title: '系统提示',
                    content: '确认删除选中数据吗?',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: function () {
                        _this.$Spin.show({
                            render: (h) => {
                                return h('div', [
                                    h('Icon', {
                                        'class': 'demo-spin-icon-load',
                                        props: {
                                            type: 'ios-loading',
                                            size: 18
                                        }
                                    }),
                                    h('div', 'Loading')
                                ])
                            }
                        });
                        let url = Api.deleteSecurityCheckTaskDetailById + '/' + row.mainTaskId;
                        this.$http.get(url, {params: {}}).then((res) => {
                            _this.$Message.success('删除成功');
                            _this.query();
                            _this.$Spin.hide();
                        }).catch(e => {
                            _this.$Spin.hide();
                            _this.$Message.error('删除失败' + e);
                        })
                    },
                    onCancel: function () {
                    }
                }
                this.$Modal.confirm(config);
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        },
    }
</script>
<style lang='css'>
    @import './../../../../index.css';
</style>
